<template>
	<div class="main">
		<van-form @submit="onSubmit" validate-trigger="onSubmit">
			<van-field
				class="product_pintro"
				v-model="pintro"
				type="textarea"
				:autosize="{ maxHeight: 300, minHeight: 200 }"
				name="pintro"
				maxlength="400"
				placeholder="买家都关心品牌型号，入手渠道，转手原因"
			/>
			<div class="type_container">
				<div class="type_title">类型</div>
				<div class="scroll_container">
					<div :class="cid-1 === index ? 'typeChoosed' : 'type'" v-for="(item, index) in cList" :key="item.id" @click="clickType(item.id)">
						{{ item.cgname }}
					</div>
				</div>
			</div>
			<div class="type_container">
				<div class="type_title">商品名/标题</div>
				<van-field class="price" maxlength="10" input-align="right" v-model="pname" placeholder="商品名" type="text" />
			</div>
			<div class="price_container">
				<div class="type_title">价格</div>
				<van-field class="price" maxlength="10" input-align="right" v-model="pprice" placeholder="0.00" type="number" />
				<p class="Symbol">¥</p>
			</div>
			<div class="mail_container">
				<div class="type_title">邮寄方式</div>
				<div class="scroll_container">
					<van-tag
						:plain="mailtype === index ? false : true"
						type="primary"
						@click="clickMail(index)"
						v-for="(item, index) in mailList"
						:key="index"
						>{{ item }}</van-tag
					>
				</div>
			</div>
			<van-field name="uploader" label="文件上传">
				<template #input>
					<van-uploader v-model="file" :after-read="afterRead" :max-count="1"/>
				</template>
			</van-field>
			<div style="margin: 16px;">
				<van-button round block type="primary" native-type="submit">
					提交
				</van-button>
			</div>
		</van-form>
	</div>
</template>

<script setup>
import { reactive, toRefs, onMounted, computed, getCurrentInstance, watch, defineEmits, ref } from 'vue';
import { useStore } from 'vuex';
import { CategoryList, ProductAddIn } from '@s/products';
const { proxy } = getCurrentInstance();
const data = reactive({
	cList: [],
});
const form = reactive({
	pname: '',
	pintro: '',
	cid: -1,
	mailtype: -1,
	pprice: '',
	file: [],
});
const value = ref([{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }]);
const { cList } = toRefs(data);
const { pname,pintro,cid,mailtype,pprice,file } = toRefs(form);
CategoryList({ pageSize: 100, pageNum: 1}).then((res) => {
	data.cList = res.data.data;
});
const afterRead = (file) => {
	form.file[0] = file;
};
const onOversize= (file) => {
	proxy.$toast('大小不能超过500kb');
}
const onSubmit = (values) => {
	form.uid = proxy.$store.state.user.userInfo.id;
	//验证规则
	if (form.pintro == '') {
		proxy.$toast('介绍不能为空');
		return;
	}
	if (form.cid === -1) {
		proxy.$toast('商品类型不能为空');
		return;
	}
	if (form.pname === '') {
		proxy.$toast('商品名不能为空');
		return;
	}
	if (form.pprice == '') {
		proxy.$toast('价格不能为空');
		return;
	}
	if (form.mailtype === -1) {
		proxy.$toast('邮寄类型不能为空');
		return;
	}
	if (!form.file[0]) {
		proxy.$toast('图片不能为空');
		return;
	}
	let uploadData = new FormData();
	uploadData.append('uid', form.uid);
	uploadData.append('pname', form.pname);
	uploadData.append('pintro', form.pintro);
	uploadData.append('cid', form.cid);
	uploadData.append('mailtype', form.mailtype);
	uploadData.append('pprice', form.pprice);
	uploadData.append('file', form.file[0].file);
	console.log(uploadData.get('pname'));
	ProductAddIn(uploadData).then((res) => {
		if (res.code == 200) {
			proxy.$toast.success('发布成功');
			proxy.$router.push('/myPublish');
		} else {
			proxy.$toast.fail('发布失败，请联系客服');
		}
	});
};

const emit = defineEmits(['isBar', 'isNav','loading']);
onMounted(() => {
	emit('isBar');
	// 初始化活动状态
	emit('isNav');
		emit('loading');
});

const clickType = (index) => {
	form.cid = index;
		console.log(form.cid);
};

const mailList = ref(['包邮', '不包邮', '到付']);
const clickMail = (index) => {
	form.mailtype = index;
};
</script>
<style lang="scss" scoped>
.main {
	height: 100vh;
	background-color: #ffffff;
	padding: 50px 15px 0px;
	.product_pintro {
		background-color: #ffffff;
		font-size: 18px;
		color: rgb(141, 141, 141);
	}
	.type_container {
		display: flex;
		align-items: center;
		padding: 10px 14px;
		.type_title {
			font-weight: bold;
			font-size: 18px;
			white-space: nowrap;
		}
		.scroll_container::-webkit-scrollbar {
			display: none;
		}
		.scroll_container {
			display: flex;
			align-items: center;
			overflow-x: auto;
			margin-left: 14px;
			.type {
				display: flex;
				flex-shrink: 0;
				border-radius: 14px;
				line-height: 30px;
				background-color: whitesmoke;
				margin: 0px 8px;
				padding: 0px 8px;
			}
			.typeChoosed {
				@extend .type;
				background-color: #fdf5e8;
				color: #f38402;
			}
		}
	}
	.price_container {
		@extend .type_container;
		.van-cell {
			padding: 0px 30px;
		}
		.type_title {
			font-weight: bold;
			font-size: 18px;
			white-space: nowrap;
		}
		// .price {
		// }
		.Symbol {
			position: absolute;
			right: 42px;
			line-height: 1;
			font-size: 32px * 0.5;
			color: #fb5746;
			letter-spacing: 0px;
			font-weight: bold;
		}
	}
	.mail_container {
		display: flex;
		align-items: center;
		padding: 10px 14px;
		.type_title {
			font-weight: bold;
			font-size: 18px;
			white-space: nowrap;
		}
		.scroll_container {
			display: flex;
			align-items: center;
			margin-left: 14px;
			.van-tag {
				margin: 0px 6px;
			}
		}
	}
}
</style>
